<template>
  <div class="Attr">
    <el-card class="classify">
      <CategorySelect @getData="getData" @watchBtnShow="watchBtnShow" :selectDisabled="selectDisabled"></CategorySelect>
    </el-card>
    <el-card class="tableCard" v-if="isShowTable">
      <el-button type="primary" icon="el-icon-plus" :disabled="btnDisabled" @click="handleAdd">添加属性</el-button>
      <el-table class="table" border :data="tableData">
        <el-table-column label="序号" width="80px" align="center">
          <template v-slot="{$index}">
            {{$index+1}}
          </template>
        </el-table-column>
        <el-table-column label="属性名称" width="150px" prop="attrName"></el-table-column>
        <el-table-column label="属性值列表">
          <template v-slot="{row}">
            <el-tag type="success" v-for="item in row.attrValueList" :key="item.id" style="margin-right:10px">{{item.valueName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template v-slot="{row}">
            <el-button type="warning" icon="el-icon-edit" size="mini" @click="handleEdit(row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDel(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <component :is="'tableCard'" ref="tableCard" v-else :editRowData="editRowData" @handleShowTable="handleShowTable" @getData="getData"></component>
  </div>
</template>

<script>
import cloneDeep from "lodash/cloneDeep";
import { getAttrInfoList } from "@/api/product/attr";
export default {
  name:'Attr',
  components:{
    tableCard:()=>import('./tableCard.vue')
  },
  data(){
    return{
      editRowData:{},
      tableData:[],
      selectDisabled:false,
      isShowTable:true,
      btnDisabled:true,
      thirdId:'',
      initObj:{}
    }
  },
  watch:{
    'isShowTable':{
      handler(newV){
        console.log(newV);
        if (newV) {
          this.selectDisabled = false
        }
      },
    }
  },
  methods:{
    // 获取商品详情数据
    async getData(obj=''){
      if (obj !== '') {
        this.initObj=obj
      }
      const res = await getAttrInfoList(this.initObj)
      this.tableData = res
      this.thirdId = obj.selectionThree || this.initObj.selectionThree
      this.btnDisabled = false
    },
    // 三级菜单无值禁用添加按钮
    watchBtnShow(bol){
      this.btnDisabled = bol
    },
    // 编辑
    handleEdit(row){
      this.isShowTable = false
      this.selectDisabled = true
      const rowData = cloneDeep(row)
      rowData.attrValueList.forEach(item => {
        item.flag = false
      });
      // this.editRowData = JSON.parse(JSON.stringify(row))
      this.editRowData = rowData
    },
    // 删除
    handleDel(row){

    },
    // tableCard组件(新增/编辑)按取消触发
    handleShowTable(){
      this.isShowTable = !this.isShowTable
    },
    // 添加属性
    handleAdd(){
      this.isShowTable = false
      this.selectDisabled = true
      this.editRowData = {
        attrName: '',
        attrValueList: [],
        categoryId: this.thirdId, // 三级分类的id
        categoryLevel:3,
        // mode:'add'
      }
    }
  }
}
</script>

<style lang="scss">
  .Attr{
    .classify{
      margin-bottom: 20px;
    }
    .tableCard{
      .table{
        margin-top: 20px;
      }
    }
  }
</style>